<template>
  <div ref="chapter" class="el-chapter" :class="{ close: !chapterShow }" @contextmenu.prevent="_contextmenu">
    <div class="el-chapter-tree">
      <div v-if="options.show_row_btn" v-show="plusOnce.btn" ref="chapteraddOne" class="el-chapter-addOne"><div class="el-chapter-btn" @click="() => append(0)">添加章节目录</div></div>
      <el-tree
        v-show="chapterShow"
        ref="tree"
        :data="treeDatas"
        :show-checkbox="options.show_checkbox"
        current-node-key="id"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        @node-click="node_click"
        @node-contextmenu="node_contextmenu"
      >
        <div slot-scope="{ node, data }" class="el-chapter-node">
          <div class="el-chapter-title">{{ node.label }}</div>
          <div v-show="options.show_row_btn" class="el-chapter-child">
            <div class="el-chapter-btn" @click="() => append(1, node, data)">添加同级</div>
            <div class="el-chapter-btn" @click="() => append(2, node, data)">添加子级</div>
            <div class="el-chapter-btn" @click="() => update(3, node, data)">修改</div>
            <div class="el-chapter-btn el-color-red" @click="() => remove(node, data)">删除</div>
          </div>
        </div>
      </el-tree>
    </div>
  </div>
</template>
<script>
import {
  treeCourseCataloglist,
  addCourseCatalog,
  editCourseCatalog,
  deleteCourseCatalogById
} from '@/api/course/chapter.js'

export default {
  props: {
    options: {
      type: [Object, Array],
      default: function() { // 对象或数组默认值必须从一个工厂函数获取
        return {
          show_checkbox: false,
          show_row_btn: false,
          expand_on_click_node: false,
          check_on_click_node: false
        }
      }
    }
  },
  data() {
    return {
      chapterShow: true,
      plusOnce: {
        show: true,
        btn: false
      },
      treeProps: {
        label: (data, node) => {
          return data.label
        }
      },
      treeParam: {
        courseId: this.$route.query.courseId || null, // 课程ID
        // courseCatalogId: this.$route.query.courseCatalogId || null, // 课程章节主键ID
        // courseId: this.$store.getters.courseId || null, // 课程ID
        // courseCatalogId: this.$store.getters.courseId || null, // 课程章节主键ID
        courseCatalogName: null, // 课程的章节名称
        courseCatalogPid: null // 课程章节的父级ID
      },
      treeDatas: [],
      treeDatasChecked: {},
      treeCurrent: {
        data: {
          id: '',
          label: ''
        },
        node: {}
      },
      chapterForm: {
        courseId: this.$route.query.courseId || this.$store.getters.courseId || null,
        courseCatalogId: this.$store.getters.courseCatalogId || null,
        courseCatalogName: '',
        courseCatalogPid: null
      }
    }
  },
  created() {
    document.addEventListener('click', (e) => {
      this.plusOnce.btn = false
      if (e.target !== this.$refs.chapteraddOne) {
        this.setCurrentKey(null)
      }
    })
    // document.addEventListener('contextmenu', (e) => {
    //   this.setCurrentKey(null)
    //   this.plusOnce.btn = false
    // })
    this.getDatas()
  },
  methods: {
    getDatas(num) {
      treeCourseCataloglist(this.treeParam)
        .then((response) => {
          if (response.code === 200 || response.code === 20000) {
            this.treeDatas = response.data
            if (response.data.length > 0) {
              this.plusOnce.show = false
            } else {
              this.plusOnce.show = true
            }
          }
        })
    },
    _contextmenu(event) {
      this.plusOnce.btn = false
      this.plusOnce.btn = true
    },
    node_contextmenu(event, data, node, self) { // 右键
      this.setCurrentKey(data.id)
      this.treeCurrent = {
        data,
        node
      }
      this.$refs.tree.setCheckedKeys([data.id])
      // console.log(this.treeCurrent)
      this.$store.dispatch('course/courseCatalogInfo', {
        courseCatalogId: data.id,
        courseCatalogName: data.label
      }).then(response => {
        this.$router.push({
          path: this.$route.path,
          query: {
            courseId: this.$route.query.courseId,
            courseName: this.$route.query.courseName,
            courseCatalogId: this.treeCurrent.data.id,
            act: this.$route.query.act,
            stepActive: this.$route.query.stepActive
          }
        })
      })
    },
    node_click(data, node, self) { // 点击菜单标题
      this.treeCurrent = {
        data,
        node
      }
      const tree = this.getTreeNode(node, {})
      this.$refs.tree.setCheckedKeys([])
      this.$store.dispatch('course/courseTree', tree)
      this.$store.dispatch('course/courseCatalogInfo', {
        courseCatalogId: data.id,
        courseCatalogName: data.label
      }).then(response => {
        this.$router.push({
          path: this.$route.path,
          query: {
            courseId: this.$route.query.courseId,
            courseName: this.$route.query.courseName,
            courseCatalogId: this.treeCurrent.data.id,
            act: this.$route.query.act,
            stepActive: this.$route.query.stepActive
          }
        })
      })
    },
    setCurrentKey(id) {
      this.treeCurrent.id = id
      // this.$refs.tree.setCurrentKey(id)
    },
    append(type, node, data) {
      this.setChapterForm(type, node, data)
      this.promptGo(data, type)
    },
    update(type, node, data) {
      this.setChapterForm(type, node, data)
      this.promptGo(data, type)
    },
    promptGo(data, type) {
      const prompt = this.getPrompt(type)
      this.$prompt(prompt.tips, prompt.title, {
        inputValue: (type === 3) ? data.label : '',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then((result) => {
        if (result.value) {
          this.chapterForm.courseCatalogName = result.value
          if (type < 3) {
            this.addCourseCatalog(type)
          } else if (type === 3) {
            this.editCourseCatalog(type)
          }
        } else {
          this.$message({
            type: 'info',
            message: '输入不能为空'
          })
        }
      // eslint-disable-next-line handle-callback-err
      }).catch((err) => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    addCourseCatalog(data, result, type) {
      addCourseCatalog(this.chapterForm).then((response) => {
        if (response.code === 20000) {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.getDatas(type)
        } else {
          this.$message({
            type: 'error',
            message: response.msg
          })
        }
      })
    },
    editCourseCatalog(data, result, type) {
      editCourseCatalog(this.chapterForm).then((response) => {
        // console.log(response)
        if (response.code === 20000 || response.code === 200) {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.getDatas(type)
        } else {
          this.$message({
            type: 'error',
            message: response.msg
          })
        }
      })
    },
    setChapterForm(type, node, data) {
      switch (type) {
        case 0: // 没有章节时添加第一个章节目录
          this.chapterForm.courseCatalogId = null
          this.chapterForm.courseCatalogPid = 0
          break
        case 1: // 有章节时添加同级目录
          this.chapterForm.courseCatalogPid = this.treeCurrent.node.parent.data.id
          break
        case 2: // 有章节时添加子级目录
          this.chapterForm.courseCatalogPid = this.treeCurrent.data.id
          break
        case 3: // 有章节时修改当前目录
          this.chapterForm.courseCatalogPid = this.treeCurrent.node.parent.data.id
          this.chapterForm.courseCatalogId = this.treeCurrent.data.id
          break
        default:
          break
      }
    },
    remove(node, data, type) {
      deleteCourseCatalogById({
        courseId: this.chapterForm.courseId,
        courseCatalogId: data.id
      }).then((response) => {
        if (response.code === 20000 || response.code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          // this.getDatas(type)
        } else {
          this.$message({
            type: 'error',
            message: response.msg
          })
        }
        this.getDatas(type)
      })
    },
    getPrompt(type) {
      switch (type) {
        case 0:
          return {
            title: '添加目录',
            tips: '请输入一级目录名称'
          }
        case 1:
          return {
            title: '添加目录',
            tips: '请输入同级目录名称'
          }
        case 2:
          return {
            title: '添加目录',
            tips: '请输入子级目录名称'
          }
        case 3:
          return {
            title: '编辑目录',
            tips: '请输入新目录名称'
          }
        case 4:
          return {
            title: '删除目录',
            tips: '您确定删除当前目录吗'
          }
        default:
          return {
            title: '',
            tips: ''
          }
      }
    },
    _chapterShow() {
      this.chapterShow = !this.chapterShow
    },
    drawerClose(done) {
      done()
    },
    getTreeNode(node, tree) {
      var treeChild = {
        id: node.data.id,
        label: node.data.label
      }
      if (node.parent.data.label) {
        treeChild = {
          id: node.parent.data.id,
          label: node.parent.data.label,
          children: {
            id: node.data.id,
            label: node.data.label
          }
        }
        if (node.parent.parent.data.label) {
          treeChild = {
            id: node.parent.parent.data.id,
            label: node.parent.parent.data.label,
            children: {
              id: node.parent.data.id,
              label: node.parent.data.label,
              children: {
                id: node.data.id,
                label: node.data.label
              }
            }
          }
          // treeChild.children.children = this.getTreeNode(node.parent.parent, treeChild)
          return treeChild
        } else {
          return treeChild
        }
      } else {
        return treeChild
      }
    }
  }
}
</script>
<style lang="scss" src="./index.scss"></style>
